<template>
  <el-main>
    <div class="container-fluid">
      <div class="bg-before">
        <div class="container">
          <Info />
          <Chapter />
          <Comment :comment="commentList" />
        </div>
      </div>
    </div>
  </el-main>
</template>

<script>
import Info from "~/components/work/Info.vue";
import Chapter from "~/components/work/Chapter.vue";
import Comment from "~/components/work/Comment.vue";
import Cookies from "js-cookie";
export default {
  components: {
    Info,
    Chapter,
    Comment
  },
  async asyncData({ $axios, store, route, redirect }) {
    let { status, data } = await $axios.get(
      "/api/comment/all?workId=" + route.params.id
    );

    return {
      commentList: data
    };
  },

  async fetch({ $axios, store, route, redirect }) {
    let id = route.params.id;

    let [workInfoResult, workChapterResult] = await Promise.all([
      $axios.get("/api/work/" + id),
      $axios.get("/api/chapter?workId=" + id)
    ]);

    {
      let { status, data } = workInfoResult;
      store.commit("work/info", data);
    }

    {
      let { status, data } = workChapterResult;
      store.commit("work/chapter", data);
    }

    if (store.state.user.current) {
      try {
        let { status, data } = await $axios.get("/api/collect/" + id);
        store.commit("work/collect", data);
      } catch (error) {
        store.commit("user/current", null);

        Cookies.remove("current");
        redirect(route.path);
      }
    }
  },

  computed: {}
};
</script>

<style scoped>
.el-main {
  overflow-x: hidden;
}
.bg-before {
  width: 100%;
  height: 100%;
  background-color: rbga(0, 0, 0, 0.4);
}
.bg {
  position: absolute;

  width: 100%;
  height: 100%;
  filter: blur(10px);
}
</style>
